Separating layout css from styling css in Nice Menus:

I've been dissatisfied with setting nice-menus-default.css globally. Although I want to share my nice-menus LAYOUT between themes, I would like to override the STYLE css, i.e. the colors of backgrounds and borders within each theme's css file. Presently, the n-m-d.css locks the layout together with styling.

I came up with a pretty good solution at http://tango.org , which is built on Zen 6.2 with Nice-Menus 6.2:

Moving Borders, Backgrounds and Colors out of nice-menus-default.css

Pull all the border, background and color css out of n-m-d.css, set the global default in admin/build/themes/settings as typical, and then put the following code in my over-ride css file, in this case the html-elements of Zen 2. (In Zen 1, that would be the theme_name.css file.) One of the main principles of Zen is to separate layout from styling; of course you still end up messing with both, but it greatly improves multi-theme re-use. I won't guarantee that my css is optimal, but it relies on just a few statements.

It's still kind of a hack to need the global themes setting for the layout...I'd rather keep the nice-menu layout override within each theme, even if it is the same as in another theme. If I use the global file from theme abc across all my themes, then I have to remember that fact in theme xyz.

/* css override styles from tango.org  */
/* First remove all background colors, borders from n-m-d.css, leaving arrows */

/* Nice menus right in sidebar with borders */

/* Nice menus down in navbar without top & bottom borders */
/* Tricky: have to put borders back in for drop-downs */

/* Add borders on all nice-menus */
ul.nice-menu li {
  border: 1px solid #9999FF;
}

/* Add background colors on nice-menu-right */
ul.nice-menu-right,
ul.nice-menu-right ul{
  padding: 0px; 
  background: #FFFFCC;
  border-top: 1px solid #9999FF;
}

ul.nice-menu-right li {
  border-top: none;
}

/* Add different background colors on nice-menu-down */
ul.nice-menu-down, 
ul.nice-menu-down ul {
  background: #FFFFFF;
}

/* No top or bottom border in navbar, but use vert bar between elements */
ul.nice-menu-down li {
  border: none;
  border-left: 1px solid #9999FF;
}

/* Put borders back in in navbar drop-downs*/
ul.nice-menu-down li li {
  border: 1px solid #9999FF;
  border-top: none;
}

/* use css structural pseudo class to address first li to remove vert bar at left of navbar */
ul.nice-menu-down li:first-child{
  border-left: none;
}
ul.nice-menu-down li li:first-child {
  border: 1px solid #9999FF;
}